<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator';
import NovelList from '@/pages/list/component/NovelList.vue';
import { queryNovelListByFavoritesPrepare } from '@/api/novel/list';

@Component({
  components: {
    NovelList,
  }
})
export default class FavoriteListPage extends Vue {
  get api() {
    return queryNovelListByFavoritesPrepare();
  }
}
</script>
<template>
<div class="favorite-novel-page">
  <h2>我的收藏</h2>
  <novel-list :api="api" />
</div>
</template>
<style scoped>
.favorite-novel-page {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}

.tiny-mode .favorite-novel-page {
  padding: 0 10px;
}

h2 {
  margin: 20px 0;
  font-size: 120%;
  font-weight: bold;
}

</style>
